<template>
  <div class="v-common-attr" @mousedown="setInitial(curComponent.style)">
    <el-collapse v-model="activeName" accordion @change="onChange">
      <el-collapse-item title="通用样式" name="style">
        <el-form>
          <el-form-item v-for="({ key, label }, index) in styleKeys" :key="index" :label="label">
            <el-color-picker v-if="isIncludesColor(key)" v-model="curComponent.style[key]" show-alpha></el-color-picker>
            <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
              <el-option
                v-for="item in optionMap[key]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              v-else-if="key == 'fontSize' && curComponent.component == 'VText'"
              v-model.number="curComponent.style[key]"
              type="number"
              @input="setFontSize(curComponent)"
            />
            <el-input v-else v-model.number="curComponent.style[key]" type="number" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="设备属性" name="style1">
        <el-form>
          <el-form-item v-for="({ key, label }, index) in deviceKeys" :key="index" :label="label">
            <el-color-picker
              v-if="isIncludesColor(key)"
              v-model="curComponent.device_attr[key]"
              show-alpha
            ></el-color-picker>
            <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.device_attr[key]">
              <el-option
                v-for="item in optionMap[key]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              v-else-if="key == 'fontSize' && curComponent.component == 'VText'"
              v-model.number="curComponent.device_attr[key]"
              type="text"
              @input="setFontSize(curComponent)"
            />
            <el-input v-else v-model.number="curComponent.device_attr[key]" type="text" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="优化器 / 组件比例" name="style2">
        <div class="optimizer">
          <span class="scale_class">1:1</span>
          <span class="scale_class">1:2</span>
          <span class="scale_class">1:3</span>
          <span class="scale_class">1:4</span>
        </div>

        <div class="treeBox">
          <el-tree
            :data="sourceData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="true"
            :props="defaultProps"
            highlight-current
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="slot-t-node">
              <template>
                <i
                  :class="{
                    'el-icon-folder': !node.expanded && data.childrenList && data.childrenList.length > 0, // 节点收缩且有子节点
                    'el-icon-folder-opened': node.expanded && data.childrenList && data.childrenList.length > 0, // 节点展开且有子节点
                    'el-icon-document': node.expanded && (!data.childrenList || data.childrenList.length === 0), // 节点展开且没有子节点
                  }"
                  style="color: #409eff"
                />
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </div>

        <!-- <div>
          <el-tree
            :data="data"
            :default-expand-all="treeAll"
            show-checkbox
            node-key="id"
            @check-change="handleNodeClick"
          >
          </el-tree>
        </div> -->
      </el-collapse-item>
      <Request v-if="curComponent.request"></Request>
      <Linkage v-if="curComponent.linkage"></Linkage>
    </el-collapse>
  </div>
</template>

<script>
import {
  styleData,
  textAlignOptions,
  borderStyleOptions,
  verticalAlignOptions,
  selectKey,
  optionMap,
} from '@/utils/attr'
import Request from './Request'
import Linkage from './Linkage'

export default {
  components: { Request, Linkage },
  data() {
    return {
      optionMap,
      styleData,
      textAlignOptions,
      borderStyleOptions,
      verticalAlignOptions,
      selectKey,
      activeName: '',
      treeAll: false,
      sourceData: [
        // 树源数据
        {
          id: null,
          name: '重庆市XXX有限公司',
          parentId: '0',
          childrenList: [
            {
              id: null,
              name: '研发中心',
              parentId: '1',
              childrenList: [
                {
                  id: null,
                  name: '研发1组',
                  parentId: '2',
                  childrenList: [
                    {
                      id: null,
                      name: 'IOS测试机',
                      parentId: null,
                      childrenList: null,
                    },
                  ],
                },
                {
                  id: null,
                  name: '安卓测试机',
                  parentId: null,
                  childrenList: null,
                },
              ],
            },
            {
              id: null,
              name: '产品中心',
              parentId: '1',
              childrenList: [],
            },
            {
              id: null,
              name: '员工1',
              parentId: null,
              childrenList: null,
            },
            {
              id: null,
              name: '员工12',
              parentId: null,
              childrenList: null,
            },
            {
              id: null,
              name: '员工13',
              parentId: null,
              childrenList: null,
            },
          ],
          type: 1,
        },
      ],
      data: [
        {
          id: 1,
          label: 'HV2270101052',
          disabled: true,
          children: [
            {
              id: 3,
              label: '二级 2-1',
            },
            {
              id: 2,
              label: '二级 2-2',
              selected: true,
            },
          ],
        },
        {
          id: 1,
          label: 'HV2270101053',
          disabled: true,
          children: [
            {
              id: 3,
              label: '二级 2-1',
            },
            {
              id: 2,
              label: '二级 2-2',
              // disabled: true,
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  computed: {
    styleKeys() {
      if (this.curComponent) {
        const curComponentStyleKeys = Object.keys(this.curComponent.style)

        return this.styleData.filter((item) => curComponentStyleKeys.includes(item.key))
      }

      return []
    },
    deviceKeys() {
      if (this.curComponent) {
        console.log('curComponentStyleKeys11', this.curComponent)
        const curComponentStyleKeys = Object.keys(this.curComponent.device_attr)

        return this.styleData.filter((item) => curComponentStyleKeys.includes(item.key))
      }

      return []
    },
    curComponent() {
      return this.$store.state.curComponent
    },
  },
  watch: {
    curComponent() {
      this.activeName = this.curComponent.collapseName
    },
  },
  created() {
    this.activeName = this.curComponent.collapseName
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    setInitial(style) {
      this.initialStyle = JSON.parse(JSON.stringify(style))
    },
    setFontSize() {
      const proportion = this.curComponent.style.fontSize / this.initialStyle.fontSize
      const updatedStyle = {
        width: (proportion * this.initialStyle.width).toFixed(4),
        height: (proportion * this.initialStyle.height).toFixed(4),
        padding: (proportion * this.initialStyle.padding).toFixed(4),
      }
      this.curComponent.style = { ...this.curComponent.style, ...updatedStyle }
      this.$store.commit('setShapeStyle', this.curComponent.style)
      this.$store.commit('recordSnapshot')
    },
    onChange() {
      this.curComponent.collapseName = this.activeName
    },

    isIncludesColor(str) {
      return str.toLowerCase().includes('color')
    },
  },
}
</script>

<style lang="scss">
// 设置树形组件节点的定位和左内边距
.tree-container >>> .el-tree-node {
  position: relative;
  padding-left: 13px;
}

// 设置树形组件节点的 before 伪类的样式
.tree-container >>> .el-tree-node:before {
  width: 1px;
  height: 100%;
  content: '';
  position: absolute;
  top: -38px;
  bottom: 0;
  left: 0;
  right: auto;
  border-width: 1px;
  border-left: 1px solid #b8b9bb;
}

// 设置树形组件节点的 after 伪类的样式
.tree-container >>> .el-tree-node:after {
  width: 13px;
  height: 13px;
  content: '';
  position: absolute;
  left: 0;
  right: auto;
  top: 12px;
  bottom: auto;
  border-width: 1px;
  border-top: 1px solid #b8b9bb;
}

// 设置树形组件首节点的左边框不显示
.tree-container >>> .el-tree > .el-tree-node:before {
  border-left: none;
}

// 设置树形组件首节点的顶部边框不显示
.tree-container >>> .el-tree > .el-tree-node:after {
  border-top: none;
}

// 设置树形组件末节点的 before 伪类的高度
.tree-container >>> .el-tree .el-tree-node:last-child:before {
  height: 50px;
}

// 设置树形组件节点字体大小、以及取消左内边距
.tree-container >>> .el-tree .el-tree-node__content {
  color: #000;
  font-size: 14px;
  padding-left: 0 !important;
}

// 设置树形组件孩子节点左内边距
.tree-container >>> .el-tree .el-tree-node__children {
  padding-left: 11.5px;
}

// 设置树形组件复选框左右外边距
.tree-container >>> .el-tree .el-tree-node__content > label.el-checkbox {
  margin: 0 5px 0 5px !important;
}

// 设置树形组件展开图标定位、图层、内边距
.tree-container >>> .el-tree .el-tree-node__expand-icon {
  position: relative;
  z-index: 99;
}

// 设置树形组件叶子节点的默认图标不显示
.tree-container >>> .el-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
}

// 设置树形组件叶子节点的横线
.tree-container >>> .el-tree .leaf-node-line {
  width: 23px;
  height: 13px;
  content: '';
  position: absolute;
  left: 13px;
  right: auto;
  top: 12px;
  bottom: auto;
  border-width: 1px;
  border-top: 1px solid #b8b9bb;
}

// 设置树形组件有叶子节点的左外边距
.tree-container >>> .el-tree .el-tree-node__content:has(.is-leaf) {
  // color: aqua;
  margin-left: 24px !important;
}
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/m0_51639558/article/details/143039737
.v-common-attr {
  .el-input-group__prepend {
    padding: 0 10px;
  }
}
.optimizer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.scale_class {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 23%;
  height: 1.89474rem;
  border-radius: 30px;
  cursor: pointer;
  // background-color: #2a292e;
  border: 0.04211rem solid #9795a3;
}
</style>
